<template>
  <div class="shade">
    <div class="box" v-show="boxState" @click="cancel()">
      <addUsers v-show="storeB.titleState === '添加用户'"></addUsers>
      <userAlter v-show="storeB.titleState === '修改用户'"></userAlter>
      <allotUser v-show="storeB.titleState === '分配用户'"></allotUser>
      <editRole v-show="storeB.titleState === '编辑角色'"></editRole>
      <addRole v-show="storeB.titleState === '添加角色'"></addRole>
      <delRole v-show="storeB.titleState === '删除角色'"></delRole>
      <roleAuthorization v-show="storeB.titleState === '分配权限'"></roleAuthorization>
      <addClassification v-show="storeB.titleState === '添加分类'"></addClassification>
      <editClassification v-show="storeB.titleState === '编辑分类'"></editClassification>
      <deleteCommodity v-show="storeB.titleState === '删除分类'"></deleteCommodity>
      <addSp v-show="storeB.titleState === '添加商品table'"></addSp>
      <editSp v-show="storeB.titleState === '编辑商品table'"></editSp>
    </div>
  </div>
</template>

<script lang="ts" setup>
import editSp from './editSp/index.vue'
import addSp from './addSp/index.vue'
import deleteCommodity from './deleteCommodity/index.vue'
import editClassification from './editClassification/index.vue'
import addClassification from './addClassification/index.vue'
import roleAuthorization from './roleAuthorization/index.vue'
import delRole from './delRole/index.vue'
import addRole from './addRole/index.vue'
import editRole from './editRole/index.vue'
import allotUser from './allotUser/index.vue'
import userAlter from './userAlter/index.vue'
import addUsers from './addUsers/index.vue'
import { useCounterStoreB } from '@/stores/temporary'
const storeB = useCounterStoreB()
const boxState = ref(storeB.addState)
const titleState = ref(storeB.titleState)
const cancel = () => {
  boxState.value = !boxState.value
  storeB.stateFun(boxState.value)
}

watch(
  () => storeB.addState,
  (newVal) => {
    boxState.value = newVal
  },
)
watch(
  () => storeB.titleState,
  (newVal) => {
    titleState.value = newVal
  },
)
</script>

<style scoped lang="scss">
.box {
  width: 99vw;
  height: 98vh;
  background: #00000069;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
